<template>
  <div>
    <a-card :bordered="false">
      <a-descriptions :column="4">
        <a-descriptions-item label="素材ID"> {{ materialInfo.lookId }} </a-descriptions-item>
        <a-descriptions-item label="素材类型"> {{ materialInfo.classifyName }} </a-descriptions-item>
        <a-descriptions-item label="创建时间"> {{ materialInfo.updateTime }} </a-descriptions-item>
        <a-descriptions-item label="创建人">
          <span>{{ materialInfo.creatorName }}</span>
          <span style="margin-left: 3px; margin-right: 14px">{{ materialInfo.workerId }}</span>
          <span>{{ materialInfo.storeName }}</span>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card :bordered="false" style="margin-top: 24px; min-height: 65vh">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="素材内容">
          <a-form-model :label-col="{ span: 2 }" :wrapper-col="{ span: 18 }">
            <a-form-model-item label="发布方" style="margin-bottom: 12px">
              <img v-if="materialInfo.publisherAvatar" :src="materialInfo.publisherAvatar" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px" alt="" />
              {{ materialInfo.publisherName }}
            </a-form-model-item>
            <a-form-model-item label="主题" style="margin-bottom: 12px"> {{ materialInfo.name }} </a-form-model-item>
            <a-form-model-item label="简介" style="margin-bottom: 12px">
              {{ materialInfo.content }}
            </a-form-model-item>
            <a-form-model-item label="品牌" style="margin-bottom: 12px"> {{ materialInfo.brand }} </a-form-model-item>
            <a-form-model-item label="视频/图片" style="margin-bottom: 12px">
              <div style="position: absolute; top: 50px; left: -50px">
                <a @click.stop="downClick">下载</a>
              </div>
              <div style="display: flex">
                <video :src="themeVideo.videoUrl" controls muted loop class="like-theme" v-if="themeVideo && themeVideo.videoUrl" :poster="themeVideo.coverUrl"></video>

                <viewer :images="customerStyleImgs" style="display: flex">
                  <div class="like-theme" v-for="(item, index) in customerStyleImgs" :key="index">
                    <img class="imgs" :src="item.value" :key="index" height="300" alt="" />
                    <div class="icon-sort">{{ index + 1 }}</div>
                  </div>
                </viewer>
              </div>
            </a-form-model-item>
            <a-form-model-item label="附件" style="margin-bottom: 12px">
              <div style="width: 240px">
                <JImageUpload
                  v-if="files && files.length > 0"
                  :uploadParams="getUploadParams()"
                  :dowloadTextByName="true"
                  :number="999"
                  accept=".xls,.xlsx"
                  :isMultiple="true"
                  :fileSize="10"
                  :listType="'text'"
                  v-model="files"
                  :disabled="true"
                ></JImageUpload>

                <span v-else>无</span>
              </div>
            </a-form-model-item>
          </a-form-model>
        </a-tab-pane>
        <a-tab-pane :key="2">
          <span slot="tab">
            关联商品 <span class="num">({{ productList.length }})</span>
          </span>
          <div class="ant-pro-pages-list-projects-cardList">
            <a-list :loading="loading" :data-source="productList" :grid="{ gutter: 0 }">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card class="ant-pro-pages-list-projects-card" hoverable>
                  <div style="border-bottom: 1px solid #ccc; height: 200px">
                    <img slot="cover" v-lazy="item.imgUrl ? item.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" style="width: 200px; height: 200px" />
                  </div>
                  <div class="edit-foot">
                    <p>{{ item.productName }}</p>
                    <p>{{ item.productNo }}</p>
                    <p>¥{{ item.productPrice }}</p>
                  </div>
                </a-card>
              </a-list-item>
            </a-list>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <div class="footer-box">
      <a-button style="margin-right: 10px" @click="upNext">上一篇</a-button>
      <a-button style="margin-right: 10px" type="primary" @click="downNext">下一篇</a-button>
    </div>
  </div>
</template>
<script>
import { getDetail, themeDown, themeMedia } from '@/api/pos/match'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  inline: false, //启用inline模式
  button: true, //显示右上角关闭按钮
  navbar: true, //显示缩略图导航
  title: false, //显示当前图片的标题
  toolbar: true, //显示工具栏
  tooltip: true, //显示缩略百分比
  movable: true, //图片是否可移动
  zoomable: true, //图片是否可缩放
  rotatable: false, //图片是否可旋转
  scalable: false, //图片是否可反转
  transition: true, //使用css3过度
  fullscreen: false, //播放时是否全屏
  keyboard: true //
})
export default {
  components: {
    JImageUpload
  },
  data() {
    return {
      materialInfo: {},
      productList: [],
      files: [],
      loading: false,
      customerStyleImgs: [],
      themeApprovalLogVos: [],
      themeVideo: {},
      id: this.$route.params.id,
      packNo: this.$route.params.noteId,
      nextLookId: '',
      preLookId: ''
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 上传图片
    getUploadParams() {
      return {
        ...globalData.uploadParams
      }
    },
    getInfo() {
      let params = {
        lookId: this.id,
        packNo: this.packNo
      }
      getDetail(params).then(res => {
        if (res.code == 200) {
          console.log(res, res)
          this.materialInfo = res.data
          if (!res.data.posThemeExt.files && res.data.posThemeExt.files[0] == '') {
            res.data.posThemeExt.files = []
          }
          this.files = res.data.posThemeExt.files.map(item => {
            let info = {
              url: item.fileUrl,
              name: item.fileName
            }
            return info
          })
          if (res.data.imgUrls) {
            this.customerStyleImgs = res.data.imgUrls
          }
          if (res.data.videoDetail) {
            this.themeVideo = res.data.videoDetail
          }
          if (this.customerStyleImgs && this.customerStyleImgs.length > 0) {
            this.customerStyleImgs = this.customerStyleImgs.map(item => {
              return { value: item }
            })
            this.productList = res.data.themeDetails
            this.themeApprovalLogVos = res.data.themeApprovalLogVos
            this.nextLookId = res.data.nextLookId // 下一篇
            this.preLookId = res.data.preLookId // 上一篇
          }
        }
      })
    },
    // 上一篇
    upNext() {
      if (!this.preLookId || this.preLookId == '-1') {
        this.$message.warning('暂无上一篇！')
        return
      }
      this.$router.push(`/share/pos+/match/collocation/partake/detail/${this.preLookId}/${this.packNo}`)
      location.reload()
    },
    // 下一篇
    downNext() {
      if (!this.nextLookId || this.nextLookId == '-1') {
        this.$message.warning('暂无下一篇！')
        return
      }
      this.$router.push(`/share/pos+/match/collocation/partake/detail/${this.nextLookId}/${this.packNo}`)
      location.reload()
    },
    // 下载
    downClick() {
      let params = {
        imageList: this.customerStyleImgs.map(item => item.value),
        lookId: this.id,
        videoUrl: this.themeVideo.videoUrl ? this.themeVideo.videoUrl : '',
        useThemeName: 1
      }

      themeDown(params).then(res => {
        if (res.code == 200) {
          this.pistThemeMedia(res.data)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    pistThemeMedia(redisKey) {
      themeMedia(redisKey).then(res => {
        if (res.code == 200) {
          console.log(res.data)
          if (res.data == 'wait') {
            setTimeout(() => {
              this.pistThemeMedia(this.redisKey)
            }, 500)
          } else {
            window.location.href = res.data
          }

          // this.$message.success(res.msg)
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.ant-pro-pages-list-projects-cardList {
  margin-top: 12px;
  height: 100%;
  min-height: 200px;
  overflow-y: auto;
  /deep/ .ant-row {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 200px);
    // grid-row-gap: 16px;
    grid-column-gap: 8px;
  }
  /deep/ .ant-row::before {
    content: '';
    width: 0;
    display: none;
  }

  /deep/ .ant-list-item {
    margin-bottom: 24px;
    .ant-card-hoverable {
      cursor: default;
    }
  }
  /deep/ .ant-card {
    width: 200px;
    position: relative;
    overflow: hidden;
  }
  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }
  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }
  /deep/ .ant-card-cover {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #fff;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      border-radius: 4px;
    }
  }

  .cardItemContent {
    padding: 0px 0px 6px;
    line-height: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    > p {
      color: #cdcdcd;
      font-size: 12px;
      line-height: 20px;
      margin-bottom: 0;
    }
    > h3 {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 0;
    }
    .price {
      display: flex;
      align-items: center;
    }
    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
    /deep/.ant-skeleton-title {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  /deep/ .ant-list-pagination {
    margin-top: 0;
  }
  /deep/ .ant-card-body {
    padding: 0px !important;
  }
}
.edit-foot {
  padding: 12px;
  p {
    color: #8c8c8c;
    margin-bottom: 5px;
  }
  p:first-child {
    color: #262626;
    font-size: 16px;
  }
  p:last-child {
    color: #cdcdcd;
    font-size: 12px;
  }
}
.footer-box {
  padding: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #8c8c8c;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  background: #fff;
  display: flex;
  justify-content: flex-end;
}
.like-theme {
  width: 140px;
  height: 140px;
  cursor: pointer;
  border: 1px dashed #cdcdcd;
  margin-right: 10px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border-radius: 4px;
  }
}
.icon-sort {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
/deep/ .ant-upload.ant-upload-disabled {
  display: none;
}
/deep/ .viewer-canvas {
  background-color: #fff;
  width: 70vw;
  height: 70vh;
  margin: 100px auto;
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}
</style>
